<template>
	<view class="myPage">
		<scroll-view v-if="canSels.length > 0" scroll-x="false" scroll-y="true">
			<view class="myList">
				<view class="selper" v-for='(item, index) in canSels' :key="index">
					<view class="con">
						<view class="con_item">
							<text class="item_name">{{item.name}}</text>
							<text class="item_now" v-if='item.isSelf == 1'>当前登陆人</text>
						</view>
						<view class="con_item">
							<view v-if="item.phone">
								<text class="item_lf">联系电话</text>
								<text>{{item.phone}}</text>
							</view>
							<text class="red" v-else>缺少联系电话，点击补充</text>
						</view>
					</view>
					<view @click.stop="editForm(item)">编辑</view>
				</view>
				<!-- <view class="loadMore">{{"没有更多内容了"}}</view> -->
			</view>
		</scroll-view>
		<view class="noData" v-else style="height: 100%;">
			<image :src="`${url}/statics/std/static/noData.png`"></image>
			<text>暂无数据</text>
		</view>
		<view class="btn">
			<view class="btn_con" @click='show = true'>
				<image :src="`${url}/statics/std/static/add.png`"></image>
				<text>添加游客</text>
			</view>
		</view>
		<view class="addorEdit" v-if="show">
			<view class="top"></view>
			<view class="popup-content">
				<!-- <view class="add_item_wrap"> -->
					<view class="title">{{ sForm.partnerId?"编辑游客信息":"添加游客信息" }}</view>
					<image class="close" :src="`${url}/statics/std/static/close.png`" mode="" @click="closedPop"></image>
					<view class="phone-box">
						<view class="form-item">
							<text class="label">姓名</text>
							<input class="input" name="name" v-model="sForm.name" placeholder="请输入游客姓名,必填" />
						</view>
						<view class="form-item">
							<text class="label">手机号</text>
							<input class="input" name="phone" v-model="sForm.phone"
								placeholder="请输入游客手机号" />
						</view>
						<view class="form-item" v-if="ticketInfo.phoneCheckType==='3'">
							<input class="input phone-code" name="phoneAuthCode" v-model="sForm.phoneAuthCode" placeholder="验证码" />
							<view class="get-code">
								{{ isSending ? countdown + "s" : codeTxt }}
							</view>
						</view>
						<view class="form-item">
							<text class="label">身份证号</text>
							<input class="input" name="idCode" v-model="sForm.idCode"
								placeholder="请输入游客身份证号" />
						</view>
					</view>
					<!-- <view class="close-box" @click="save">{{info.scenicAuth != 0?'认证':'保存'}}</view> -->
					<view class="close-box" @click="save">保存</view>
					<view class="cancel-box" @click="deletePop">删除</view>
		
				<!-- </view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import requestPost, {
		requestGet,
		requestPut,
		requestDel
	} from '@/utils/request.js';
	import {
		mapGetters
	} from 'vuex'
	import store, {
		GET_SAFEAREA_BOTTOM
	} from '../../store/index.js'
	const img_url = process.env.VUE_APP_BASEURL_IMG_API;
	import WxValidate from "@/utils/WxValidate";
	export default {
		data() {
			return {
				// WxValidate: null,
				total: 0,
				dataList: [],
				pages: {
					pageNum: 1,
					pageSize: 10
				},
				loadMore: true,
				url: img_url,
				showId: '',
				queryDTO: null,
				canSels: [],
				hasSel: [],
				show: false,
				sForm:{
					name: "",
					phone: "",
					idCode: ""
				}

			};
		},
		computed: {
			...mapGetters([GET_SAFEAREA_BOTTOM])
		},
		mounted() {
			console.log('安全区距离', this.GET_SAFEAREA_BOTTOM);

		},
		onShow() {
			this.getPersons()
			this.initValidate()
		},
		methods: {
			//校验表单是否必填
					initValidate() {
						const rules = {
							name: {
								required: true
							},
							phone: {
								required: false,
								tel: true
							},
							idCode: {
								required: false,
								idcard: true
							}
						};
						const message = {
							name: {
								required: "请输入姓名！"
							},
							phone: {
								// required: "请输入手机号！",
								tel: "请输入正确的手机号！"
							},
							idCode: {
								// required: "请输入身份证号",
								idcard: "身份证号码校验未通过！",
							},
						};
						this.WxValidate = new WxValidate(rules, message);
					},

			//删除游客
					deletePop(){
						//编辑
						requestDel(`/baseplatform/partner/${this.sForm.partnerId}`, {
							// _id:
						}).then((res) => {
							uni.hideLoading();
							if (res.code === 200) {
								uni.showToast({
									title: "操作成功！"
								});
								this.reset();
								this.show = false;
								this.getPersons();
							} else {
								uni.showToast({
									title: res.msg || "操作失败！",
									icon: "none"
								});
							}
						});
					},

			//保存表单
			save() {
				const isValidate = this.WxValidate.checkForm(this.sForm);
				if (!isValidate) {
					const errorList = this.WxValidate.errorList;
					uni.showToast({
						title: errorList[0].msg,
						icon: "none"
					});
					return false;
				}
				
				if (this.sForm.partnerId) {
					//编辑
					requestPut('/baseplatform/partner', {
						...this.sForm
					}).then((res) => {
						uni.hideLoading();
						if (res.code === 200) {
							uni.showToast({
								title: "操作成功！"
							});
							this.reset();
							this.show = false;
							this.getPersons();
						} else {
							uni.showToast({
								title: res.msg || "操作失败！",
								icon: "none"
							});
						}
					});
				} else {
					//添加
					requestPost('/baseplatform/partner', {
						...this.sForm
					}).then((res) => {
						uni.hideLoading();
						if (res.code === 200) {
							uni.showToast({
								title: "操作成功！"
							});
							this.reset();
							this.show = false;
							this.getPersons();
						} else {
							uni.showToast({
								title: res.msg || "操作失败！",
								icon: "none"
							});
						}
					});
				}
			},
			//关闭弹窗
			closedPop() {
				this.show = false;
				this.reset()
			},
			//重置表单数据
			reset() {
				this.sForm = {
					name: "",
					phone: "",
					idCode: ""
				}
				this.isSending = false;
				this.codeTxt = "获取验证码";
			},
			//点击编辑按钮
			editForm(item) {
				console.log(item)
				this.show = true;
				this.sForm = {
					...item
				}
			},
			selectPersons(item) {
				console.log('选择一下这个', this.hasSel.find(val => val.id == item.id))
				if (this.hasSel.findIndex(val => val.id == item.id) == -1) {
					this.hasSel.push(item)
				} else {
					console.log('进入了这里11')
					this.hasSel = this.hasSel.filter(val => val.id != item.id)
				}
			},
			getPersons() {
				requestGet(`/baseplatform/partner/list`).then((res) => {
					if (res.code === 200) {
						console.log('获取了常用游客信息', res)
						this.canSels = res.rows
					}
				});
			},
			handleChoose(item) {
				if (!this.queryDTO || item.status == '1' || item.status == '2') {
					return
				}
				console.log('选择了优惠券', item)
				uni.setStorageSync("choose-Coupon", item);
				uni.navigateBack()
			},
			getOrderCoupon() {
				requestPost('/order/order/selectCouponListByTicket', {
						"refId": parseInt(this.queryDTO.refId),
						"ruleType": parseInt(this.queryDTO.ruleType)
					})
					.then(res => {
						console.log('获取了订单可用优惠券', res)
						if (res.code == 200) {
							this.$nextTick(() => {
								this.dataList = res.data;
							})
						}
					})
			},
			showRule(id) {
				if (this.showId == id) {
					this.showId = ''
				} else {
					this.showId = id
				}
			},
			getList() {
				// if(!this.loadMore){
				//   return
				// }
				requestGet('/order/order/selectCouponList', {
					...this.pages
				}).then(res => {
					console.log('获取了优惠券列表数据', res)
					if (res.code === 200) {
						if (res.data.length > 0) {
							this.dataList = res.data;
							// if(this.dataList.length < res.total){
							//   this.loadMore = true;
							//   this.pages.pageNum = this.pages.pageNum + 1;
							// }else{
							//   this.loadMore = false;
							// }
						}
					}
					console.log('111111111===', this.loadMore)
				}).catch((err) => console.log('错误了', err))
			},
			goToAdd() {
				uni.navigateTo({
					url: "/page_my/suggestion/add"
				})
			},
			goToDetail(item) {
				uni.navigateTo({
					url: "/page_my/suggestion/details?id=" + item.id
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.popup-content {
		position: relative;
		height: 1384rpx;
		background: #F5F7F6;
		border-radius: 40rpx 40rpx 0 0;
		position: relative;
		box-sizing: border-box;
		padding: 0 40rpx;
	
		.close {
			position: absolute;
			top: 24rpx;
			right: 24rpx;
			width: 48rpx;
			height: 48rpx;
		}
	
		.phone-box {
			margin: 44rpx 0 48rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			box-sizing: border-box;
			padding-left: 24rpx;
	
			.form-item {
				display: flex;
				align-items: center;
				position: relative;
				margin: 0rpx 0rpx 24rpx;
				height: 96rpx;
				background: #ffffff;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				
				.label {
					width: 160rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(0,0,0,0.5);
					line-height: 40rpx;
				}
	
				input {
					width: calc(100% - 186rpx);
					height: 96rpx;
					padding: 0 24rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.9);
					line-height: 96rpx;
				}
	
				.phone-code {
					padding-right: 200rpx;
				}
	
				.get-code {
					position: absolute;
					right: 24rpx;
					top: 28rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #ff5000;
					line-height: 40rpx;
				}
			}
		}
	
		.title {
			height: 100rpx;
			line-height: 100rpx;
			font-size: 32rpx;
			font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
			font-weight: 500;
			color: rgba(0, 0, 0, 0.9);
		}
	
		.close-box,
		.cancel-box {
	
			border-radius: 44rpx 44rpx 44rpx 44rpx;
			font-size: 32rpx;
			font-family: Alibaba PuHuiTi 2.0-55 Regular, Alibaba PuHuiTi 20;
			font-weight: 400;
	
			height: 84rpx;
			line-height: 84rpx;
			text-align: center;
		}
	
		.close-box {
			background: #3FAA73;
			color: #FFFFFF;
			margin-bottom: 24rpx;
		}
	
		.cancel-box {
			background: #FFFFFF;
			color: rgba(0, 0, 0, 0.7);
			border: 2rpx solid rgba(0, 0, 0, 0.1);
		}
	}
	.addorEdit {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0, 0, 0, .3);
		z-index: 99;
		display: flex;
		flex-direction: column;
		.top {
			flex: 1;
		}
		.add_con {
			height: 1200rpx;
			background: #fff;
			border-radius: 40rpx 40rpx 0 0;
			// display: flex;
			// flex-direction: column;
			// align-items: center;
			// padding: 0 40rpx;
			.add_item {
				width: 100%;
				height: 96rpx;
				display: flex;
				align-items: center;
				box-sizing: border-box;
				border-bottom: 2rpx solid rgba(0,0,0,0.1);
				text {
					width: 160rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #777F8F;
					line-height: 40rpx;
					text-align: left;
				}
				input {
					flex: 1;
					&::placeholder {
						font-size: 28rpx;
						font-weight: 600;
						color: rgba(0,0,0,0.3);
						line-height: 40rpx; 
					}
				}
			}
			.btn_cancel {
				height: 84rpx;
				background: #ECEFF1;
				border-radius: 44rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 24rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: rgba(0,0,0,0.7);
				line-height: 32rpx;
			}
			.btn_save {
				height: 84rpx;
				background: #2187FF;
				border-radius: 44rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 48rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 32rpx;
			}
			.add_item_wrap {
				box-sizing: border-box;
				padding: 0 40rpx;
			}
			.tit {
				height: 104rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 0 24rpx 0 40rpx;
				text {
					font-size: 32rpx;
					font-weight: 500;
					color: rgba(0,0,0,0.9);
					line-height: 44rpx;
				}
				image {
					width: 48rpx;
					height: 48rpx;
					display: block;
				}
			}
		}
	}
	.btn {
		height: 132rpx;
		width: 100%;
		.btn_con {
			height: 84rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #3FAA73;
			border-radius: 44rpx;
			color: #fff;
			image {
				width: 40rpx;
				height: 40rpx;
				display: block;
				margin-right: 8rpx;
			}
		}
	}
	.coupon_sel {
		display: flex;
		align-items: center;
		justify-content: space-between;
	
		.lf {
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.7);
			line-height: 40rpx;
		}
	
		.rt {
			display: flex;
			align-items: center;
	
			.num {
				font-size: 28rpx;
				font-weight: 400;
				color: #FF7614;
				line-height: 40rpx;
			}
	
			.add_yk {
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.8);
				line-height: 40rpx;
			}
		}
	
		.lf_yk {
			font-size: 32rpx;
			font-weight: 600;
			color: rgba(0, 0, 0, 0.8);
			line-height: 44rpx;
		}
	
		text {
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.5);
			line-height: 40rpx;
		}
	
		image {
			width: 32rpx;
			height: 32rpx;
			display: block;
			margin-left: 8rpx;
		}
	}
	.selper {
		width: 100%;
		box-sizing: border-box;
		padding: 24rpx;
		display: flex;
		align-items: center;
		background: #fff;
		border-radius: 24rpx;
		margin-bottom: 24rpx;

		.sel_index {
			width: 104rpx;
		}

		.con {
			flex: 1;

			.con_item {
				margin-bottom: 8rpx;

				text {
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.5);
					line-height: 40rpx;
				}

				.red {
					font-size: 28rpx;
					font-weight: 400;
					color: #EA3D3D;
					line-height: 40rpx;
				}

				.item_lf {
					margin-right: 8rpx;
				}

				.item_name {
					font-size: 28rpx;
					font-weight: 600;
					color: rgba(0, 0, 0, 0.8);
					line-height: 40rpx;
					margin-right: 16rpx;
				}

				.item_now {
					font-size: 28rpx;
					font-weight: 600;
					color: #3FAA73;
					line-height: 40rpx;
				}
			}
		}
		image {
			width: 32rpx;
			height: 32rpx;
			display: block;
		}
	}

	.myPage {
		position: relative;
		height: 100vh;
		width: 100%;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		// align-items: center;
		// justify-content: flex-start;
		background: #F7F9FA;
		box-sizing: border-box;
		padding: 0 24rpx 24rpx;

	}

	.myList {
		height: calc(100vh - 132rpx);
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		box-sizing: border-box;
		padding-top: 32rpx;



		.list-item {
			width: 100%;
			display: flex;
			flex-direction: column;
			background: url('../../static/coupon_bg.png') no-repeat;
			background-size: 100%;
			margin-bottom: 32rpx;

			.item_top {
				width: 100%;
				height: 224rpx;
				display: flex;
			}

			.item-not {
				width: 100%;
				height: 224rpx;
				display: flex;
				position: relative;

				&::after {
					content: '';
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					background: rgba(255, 255, 255, .3);
				}
			}

			.item_bot {
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.5);
				line-height: 34rpx;
				margin-top: 24rpx;
				box-sizing: border-box;
				padding: 0 8rpx;
			}

			.left {
				width: 220rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.lf_top {
					display: flex;
					align-items: center;
					margin-bottom: 32rpx;
					margin-top: 8rpx;

					.je {
						font-size: 72rpx;
						font-family: D-DIN-Bold, D-DIN;
						font-weight: 700;
						color: #FF7614;
						line-height: 78rpx;
						margin-right: 8rpx;
					}

					text {
						font-size: 28rpx;
						font-weight: 600;
						color: #3D3D3D;
						line-height: 40rpx;
					}
				}

				.lf_bot {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.7);
					line-height: 34rpx;
				}
			}

			.right {
				display: flex;
				flex-direction: column;
				justify-content: center;
				margin-left: 44rpx;

				.rt_top {
					font-size: 32rpx;
					font-weight: 600;
					color: rgba(0, 0, 0, 0.8);
					line-height: 44rpx;
				}

				.rt_cen {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.5);
					line-height: 34rpx;
					margin-top: 8rpx;
					margin-bottom: 34rpx;

					.rt_time {
						margin-left: 8rpx;
					}
				}

				.rt_bot {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.7);
					line-height: 34rpx;
					display: flex;
					align-items: center;

					image {
						width: 32rpx;
						height: 32rpx;
						display: block;
						margin-left: 4rpx;
					}
				}
			}

			.top {
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;

				text:first-child {
					font-size: 32rpx;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.8);
					line-height: 44rpx;
					margin: 24rpx 0 16rpx 0;
				}

				text:last-child {
					width: 102rpx;
					height: 40rpx;
					background: #F6F6F6;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					font-size: 26rpx;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.3);
					line-height: 40rpx;
					text-align: center;
				}

				.active {
					color: #2187FF !important;
					background: #EDF3FE !important;
				}
			}

			.center {
				width: 100%;
				font-size: 28rpx;
				font-family: Alibaba PuHuiTi 2.0-45 Light, Alibaba PuHuiTi 20;
				font-weight: 300;
				color: rgba(0, 0, 0, 0.7);
				line-height: 36rpx;
				word-break: break-all;
				// display: -webkit-box;
				// -webkit-line-clamp: 3; /* 控制最多显示两行 */
				// -webkit-box-orient: vertical;
				// overflow: hidden;
				// text-overflow: ellipsis;
			}

			.images {
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-start;
				margin: 16rpx 0;

				image {
					flex: 0 0 auto;
					width: 152rpx;
					height: 152rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					margin-right: 24rpx;
				}
			}

			.time {
				width: 100%;
				font-size: 28rpx;
				font-family: Alibaba PuHuiTi 2.0-45 Light, Alibaba PuHuiTi 20;
				font-weight: 300;
				color: rgba(0, 0, 0, 0.5);
				line-height: 36rpx;
				margin-bottom: 24rpx;
			}
		}

		.loadMore {
			display: block;
			width: 100%;
			font-size: 24rpx;
			color: rgba(0, 0, 0, 0.5);
			text-align: center;
			line-height: 64rpx;
		}
	}

	.footer-btn {
		position: fixed;
		bottom: 34rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 598rpx;
		height: 84rpx;
		background: #2187FF;
		border-radius: 44rpx 44rpx 44rpx 44rpx;

		image {
			width: 40rpx;
			height: 40rpx;
			flex: 0 0 auto;
		}

		text {
			font-size: 32rpx;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 32rpx;
		}
	}
</style>